<template>
	<div>
    <div class="main_operation">
        <!-- <div class="operation_left" >

        </div>
        <div class="operation_right">
        </div> -->
    </div>
    <div class="main">
        <a-table  :pagination="false" bordered :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
          :rowKey="record => record.id"
          :scroll="{x: true, y: 500 }">
        <template slot="action" slot-scope="text, record">
          <template>

            <a-button v-if="routerShow($route, 'agent_list')" size="small" class="mr5" type="primary" @click="goCompany(record)">查看代理</a-button>
            <a-button v-if="routerShow($route, 'userPlatform_distributionAgent')" size="small" class="mr5" type="primary" @click="configAgent(record)">分配代理</a-button>
            <a-button v-if="routerShow($route, 'userPlatform_distributionCompany')" size="small" class="mr5" type="primary" @click="configCompany(record)">分配公司</a-button>
            <!-- <a-button v-if="routerShow($route,'group_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button> -->
            <a-button v-if="routerShow($route, 'userPlatform_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
          </template>
        </template>
      </a-table>
      <div class="pageBox">
        <a-pagination
          :total="dataLists.total"
          :showTotal="total => `共 ${total} 条数据`"
          :pageSize="dataLists.per_page"
          :defaultCurrent="1"
          @change="pageChange"
        />
      </div>
    </div>
    <!-- 分配代理，公司 -->
    <a-modal
      :maskClosable="false"
    	:destroyOnClose="true" :title="titleModel" :width="600"
    	v-model="visible" :confirmLoading="confirmLoading"
    	@ok="handleOk" @cancel="handleCancel">
    	  <a-transfer
          :dataSource="transferData"
          :titles="['未选', '已选']"
          :locale="{notFoundContent: '无数据',}"
          :listStyle="{ width: '230px',height: '300px'}"
          :targetKeys="isTransferType"
          :selectedKeys="selectedKeys"
          @change="handleChange" @selectChange="handleSelectChange"
          :render="item=>item.title" />
    </a-modal>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Vue from 'vue';
import { USER } from '@/store/mutation-types';

export default {
  name: 'configPlatFirm',
  data() {
		    return {
      userData: '', // 权限
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
          	page: 1,
      },
      titleModel: '', // 窗口标题
      /* 通用模块end */

      /* 分配 代理，公司 */
      visible: false, // 窗口显示隐藏
      confirmLoading: false, // 按钮loading状态

      // 分配代理提交
      configAgentForm: {
        user_id: '',
        agent_ids: [],
      },
      // 分配公司提交
      configCompanyForm: {
        user_id: '',
        company_ids: [],
      },

      selectedKeys: [], // 穿梭框所有勾选
      transferData: [], // 穿梭框数据
      /* 分配代理公司end */

      /* 分类选择 */
      selectShow: true, // 分组选择显示隐藏
      selectMainShow: true, // 分组选择内容显示隐藏
      groupId: [], // 分组信息列表
      groupName: '',
		    };
  },
  computed: {
    	...mapState({
    		Fields: state => state.group.PlatFormFields,
    		dataLists: state => state.group.dataPlatFormLists,
      requestCode: state => state.group.requestCode,

      agentAllData: state => state.group.agentAllData, // 代理all
      companyAllData: state => state.group.companyAllData, // 公司all
    }),
    isAdmin() {
      // 账号等级：1平台 2代理 3公司
      if (this.userData.role_grade === 1) {
        return 1;
      } if (this.userData.role_grade === 2) {
        return 2;
      } if (this.userData.role_grade === 3) {
        return 3;
      }
    },
    isTransferType() {
      if (this.titleModel == '分配代理') {
        return this.configAgentForm.agent_ids;
      } if (this.titleModel == '分配公司') {
        return this.configCompanyForm.company_ids;
      }
    },
  },
  mounted() {
    this.userData = Vue.ls.get(USER);
    this.agentAll();
    this.companyAll();
		    this.changeData();
  },
  methods: {
    // 穿梭框右边选中
    handleChange(nextTargetKeys, direction, moveKeys) {
      if (this.titleModel == '分配代理') {
        this.configAgentForm.agent_ids = nextTargetKeys;
      } else if (this.titleModel == '分配公司') {
        this.configCompanyForm.company_ids = nextTargetKeys;
      }
      // console.log('targetKeys: ', nextTargetKeys);
    },
    // 穿梭框勾选的
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    ...mapActions({
      getLists: 'group/getPlatFormList', // 平台管理列表
      dataDel: 'group/PlatFormDel', // 删除
      agentConfig: 'group/agentConfig', // 分配代理
      companConfig: 'group/companConfig', // 平台分配公司

      agentAll: 'group/agentAll', // 代理All
      companyAll: 'group/companyAll', // 公司All
    }),
    /* 通用模块 */
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      	this.formList.page = page;
      	this.getLists(this.formList);
    },
    /* 通用模块end */

    /* 分配代理公司 */
    // 代理分配
    configAgent(item) {
      console.log(item);
      this.titleModel = '分配代理';
      this.transferData = this.agentAllData;
      this.configAgentForm.user_id = item.id;
      this.configAgentForm.agent_ids = item.agent_id.map(String);
      this.visible = true;
    },
    // 公司分配
    configCompany(item) {
      console.log(item);
      this.titleModel = '分配公司';
      this.transferData = this.companyAllData;
      this.configCompanyForm.user_id = item.id;
      this.configCompanyForm.company_ids = item.company_id.map(String);
      this.visible = true;
    },
    // 查看代理
    goCompany(item) {
      console.log(item);
      this.$router.push({
        path: '/user/agentGrouping',
        query: {
          platformID: item.id,
        },
      });
    },
      	// 编辑
    editBtn(item) {
      console.log(item);
      this.formItem.id = item.id;
      	this.visible = true;
    },
      	// 窗口确定
    handleOk() {
      	this.confirmLoading = true;
      	if (this.titleModel == '分配代理') {
        this.agentConfig(this.configAgentForm);
      } else if (this.titleModel == '分配公司') {
        this.companConfig(this.configCompanyForm);
      }
      	setTimeout(() => {
      		// console.log(this.requestCode);
      		if (this.requestCode === 0) {
      			this.visible = false;
      			this.changeData();
      		}
      		this.confirmLoading = false;
      	}, 1000);
    },
      	// 窗口取消
    handleCancel() {
      	this.visible = false;
    },
    /* 分配代理公司end */

    /* 删除 */
    delBtn(item) {
      	const _this = this;
      	this.$confirm({
      		title: `您确定要删除 ${item.name} 吗?`,
      		content: '删除后将不可恢复,请仔细核对!',
      		okText: '确定',
      		okType: 'danger',
      		cancelText: '取消',
      		onOk() {
      			_this.dataDel({ id: item.id });
      			_this.changeData();
      		},
      	});
    },
  },
};
</script>

<style scoped>

</style>
